<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            div {
                font-size: 50px;

                /* 因为行高具有使文字居中特性, 单独设置height,会使文字上移,将height和行高设置一样的值,可以是单行的文字垂直居中*/
                /* 如果添加多行,多行的行高会叠加,但是如果指定了高度,则内容会溢出,这时候建议不指定高度*/
                /* height: 200px; */
                line-height: 200px;

                /* 
                  行高(line height)
                    - 行高指的是文字占有的实际高度
                    - 可以通过line-height来设置行高
                        行高可以直接指定一个大小(px em)
                        也可以直接为行高设置一个整数
                            如果是一个整数的话,行高将会是字体的指定的倍数

                    - 行高经常会用来设置文字之间的行间距,行间距是行高减文字大小除2得上下行间距
                        行间距 = 行高 - 字体大小
                        上下行间距 = 行间距 / 2
                  
                  字体框
                    - 字体框就是字体存在的格子,设置font-size实际就是设置字体框的高度
                  

                  行高会在字体框的上下平均分配


                */
                border: 1px red solid;

                /* line-height: 2; */
            }
        </style>
    </head>
    <body>
        <div>
            今天天气真不错,Hello,Hello,How are you!
            今天天气真不错,Hello,Hello,How are you!
            今天天气真不错,Hello,Hello,How are you!
        </div>
    </body>
</html>
